<template>
  <div>
    <el-form :model="form" :rules="rules" ref="Formdata" size="medium" :inline="true" label-width="120px">
      <el-divider>保养项目</el-divider>
      <el-form-item label="" prop="">
        <el-button type="primary" plain icon="el-icon-plus" size="medium" @click="handleAddInsurance">添加保养项目
        </el-button>
      </el-form-item>
      <el-table v-loading="loading" :data="tableList">
        <el-table-column label="序号" align="center" width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="模块" align="center" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.moduleName || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="项目" align="center" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.projectName || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="保养类型" align="center" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.typeName || '-' }}
            <!-- <dict-tag :options="statusFlag" :value="scope.row.status" /> -->
          </template>
        </el-table-column>
        <el-table-column label="描述" align="center" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.explanation || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="类型" align="center" min-width="120">
          <template slot-scope="scope">
            {{ ['选项', '极值', '输入'][scope.row.kind] || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="下限" align="center" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-if="scope.row.kind == 2">
              -
            </div>
            <div v-else>
              <span v-if="scope.row.kind == 1">{{ scope.row.contentI || '-' }}</span>
              <span v-else> - </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="上限" align="center" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-if="scope.row.kind == 2">
              -
            </div>
            <div v-else>
              <span v-if="scope.row.kind == 1">{{ scope.row.contentII || '-' }}</span>
              <span v-else>-</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="可选项" align="center" min-width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-if="scope.row.kind == 2">
              -
            </div>
            <div v-else>
              <span v-if="scope.row.kind == 0">{{ scope.row.contentI || '-' }}</span>
              <span v-else> - </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="正常选项" align="center" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-if="scope.row.kind == 2">
              -
            </div>
            <div v-else>
              <span v-if="scope.row.kind == 0">{{ scope.row.contentII || '-' }}</span>
              <span v-else> - </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="180" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button size="small" type="primary" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑
            </el-button>
            <el-button size="small" type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />

      <br><br>
      <div align="center">
        <el-button type="primary" size="medium" @click="CommitSubmit">提交</el-button>
        <el-button size="medium" @click="resetQuery">上一步</el-button>
      </div>
    </el-form>
    <!-- 添加适用设备 -->
    <template v-if="open">
      <AddEquipment @clearOpen="clearOpen"></AddEquipment>
    </template>
    <!-- 添加保养项目 -->
    <template v-if="openMain">
      <CreatedMaintainance :title="titleMain" :rowObj="rowObjMain"></CreatedMaintainance>
    </template>
  </div>
</template>

<script>
import { getlevelChildren, getUpkeepProjectList, putUpdateUpkeepLevel } from '@/api/maintenance/insurance/insurance.js'
export default {
  props: ['title', 'rowObj'],
  components: {
    AddEquipment: () => import('./form/index.vue'),
    CreatedMaintainance: () => import('./CreatedMaintainance.vue'),
    // Upload
  },
  data () {
    return {
      open: false,
      openMain: false,
      titleMain: '',
      rowObjMain: {},
      form: {
        levelName: undefined,
        explanation: undefined
      },
      loading: false,
      // 总条数
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn: 'upkeepProjectId',
        isAsc: 'desc'//倒叙
      },
      noticeList: [],
      tableList: [],
      rules: {
        levelName: { required: true, message: '必填', trigger: 'blur' },
        explanation: { required: true, message: '必填', trigger: 'blur' },
      }
    }
  },
  created () {
    this.getList()
    this.getlevel();
  },
  methods: {
    clearOpen (val) {
      this.noticeList = this.noticeList = this.removedup([...this.noticeList, ...val], 'equipmentAccountId')
      this.open = false
    },
    handleDelete (index) {
      this.noticeList.splice(index, 1)
    },
    async getlevel () {
      this.loading = true
      let res = await getlevelChildren(this.rowObj.upkeepLevelId);
      this.loading = false
      this.form.levelName = res.data.levelName
      this.form.explanation = res.data.explanation
      this.noticeList = res.data.eaPartInfoVos
    },
    resetQuery () {
      // this.$emit('clear')
      this.$parent.openNext = false
      this.$parent.titleUpdate = '修改标准'
    },
    /**
     * 下一步
     */
    CommitNext () {

    },
    async getList () {
      // if (this.title === '修改标准') {
      this.loading = true
      let param = {
        ...this.queryParams,
        upkeepLevelId: this.rowObj.upkeepLevelId
      }
      let params = await getUpkeepProjectList(param);
      this.tableList = params.data
      this.total = params.total;
      this.loading = false
      // }
    },
    /**添加适用设备 */
    handleCreated () {
      this.open = true
    },
    /**编辑保养项目 */
    handleUpdate (row) {
      this.openMain = true
      this.titleMain = '修改保养项目'
      this.rowObjMain = row
    },
    /**添加保养项目 */
    handleAddInsurance () {
      this.openMain = true
      this.titleMain = '添加保养项目'
    },
    /**提交 */
    CommitSubmit () {
      let params = {
        ...this.form,
        upkeepLevelId: this.rowObj.upkeepLevelId,
        eaPartInfoVos: this.noticeList.map(item => {
          return {
            equipmentAccountId: item.equipmentAccountId
          }
        })
      }
      putUpdateUpkeepLevel(params).then(res => {
        if (res.code === 200) {
          this.$message.success('操作成功')
          this.$parent.$emit('clear')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.center_dialog {
  // text-align: center;
  width: 90%;
  margin: 0px auto;
}

.children ::v-deep .el-descriptions--medium.is-bordered .el-descriptions-item__cell {
  text-align: center;
}
</style>